<template>
  <div class="app-container">

    <el-container>
      <el-main>
        <el-row class="search-condition">
          <el-form :inline="true">

            <el-form-item>
              <el-input />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getRolelist">查询</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="text" icon="el-icon-refresh-left">重置</el-button>
            </el-form-item>

          </el-form>
        </el-row>

        <data-grid
          :custom-data-grid="customAttendDataGrid"
        />
      </el-main>
      <!-- @page-change="pageChange" -->
    </el-container>

  </div>
</template>

<script>
import DataGrid from '@/components/DataGrid/index'
import roleManage from '@/api/sytsem-permission'

export default {
  name: 'ComplexTable',
  components: { DataGrid },
  data() {
    return {
      listQuery: {
        page: 1,
        size: 20
      },
      customAttendDataGrid: {
        list: [],
        table: {
          tableMaxHeight: 'unset',
          tableWidth: '100%',
          marginTop: 24,
          border: true,
          showPagination: true,
          showOperation: true,
          showHeader: true,
          indexWidth: 10,
          showIndex: true,
          fontSize: 16,
          cellBtn: {
            fontColor: '#ffffff'
          },
          headerCellStyle: {
            backgroundColor: '#e9f8ff',
            color: '#333333',
            fontSize: '16px'
          },
          cellStyle: {
            fontSize: '20px'
          }
        },
        page: {
          layout: 'sizes, prev, pager, next',
          pageSizes: [10, 20, 50, 100, 200],
          total: 1,
          currentPage: 1
        },
        columns: [
          { label: '名称', align: 'center', prop: 'name' },
          { label: '描述', align: 'center', prop: 'description' },
          { label: '排序', align: 'center', prop: 'sort' }
        ],
        topButtons: [
          { name: '新增', type: 'primary', icon: 'el-icon-plus', plain: true, click: () => { this.dialogOpen('add') } }
        ],
        _this: this,
        rowButtons: [
          { name: '修改', icon: 'el-icon-edit', click: (row) => {
            this.dialogOpen('update')
            this.userForm = JSON.parse(JSON.stringify(row))
            console.log(row)
          } },
          { name: '删除', icon: 'el-icon-delete', click: (row) => { this.deleteUser(row.id) } }
        ]
      }
    }
  },
  created() {
    this.getRolelist()
  },
  methods: {
    getRolelist: function() {
      roleManage.findRoleList(this.listQuery).then(data => {
        this.customAttendDataGrid.list = data.content
      })
    }
  }
}
</script>
